<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'  // 添加 computed 导入
import { useRoute } from 'vue-router'
import type { BlogDetail } from '@/types/blog/blogDetail'
import { blogApi } from '@/api/modules/blog'
import { ArticleTypeLabels } from '@/types/blog/blogTitle'
import { useMessage } from 'naive-ui'
import MarkdownView from '@/components/common/MarkdownView.vue'
import { IconAuthor, IconComment, IconZhan, IconViews, IconTime } from '../icons/Icons.vue'

// 获取路由实例
const route = useRoute()
// 获取路由参数中的 id
const blogId = computed(() => route.params.id)
const message = useMessage()
const loading = ref<boolean>(true)
const blog = ref<BlogDetail>()

// 调用接口获取博客数据
const getBlogs = async () => {
  try {
    loading.value = true
    // 确保 id 是字符串并转换为 number
    const id = Array.isArray(blogId.value) ? blogId.value[0] : blogId.value
    const numericId = Number(id)
    if (isNaN(numericId)) {
      message.error('无效的博客 ID')
      return
    }
    const response = await blogApi.GetBlogById(numericId)
    if (response.data) {
      response.data.views++;
      blog.value = response.data
      await blogApi.AddViews(numericId)
    }
  } catch {
    console.error('获取博客失败:',)
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  getBlogs();
})
</script>

<template>
  <n-flex vertical>
    <n-grid :cols="1" responsive="screen" :x-gap="12" :y-gap="12" v-if="blog">
      <n-grid-item>
        <n-card :bordered="false" hoverable :header-class="'blog-card-header'">
          <template #header>
            <n-skeleton v-if="loading" text width="60%" />
            <h3> {{ blog.title }}</h3>
            <n-flex class="blog-info" justify="space-between" style="font-size: 14px;">
              <n-space :size="2" title="作者">
                <n-icon size="20" :depth="4" :component="IconAuthor" />
                <span>
                  {{ blog.authorName }}
                </span>
              </n-space>
              <n-space :size="2" title="发布时间">
                <n-icon size="20" :depth="4" :component="IconTime" />
                <span>
                  {{ blog.publicationTime }}
                </span>
              </n-space>
              <n-flex align="center">
                <n-space :size="2" title="查看数">
                  <n-icon size="20" :depth="4" :component="IconViews" />
                  <span>
                    {{ blog.views }}
                  </span>
                </n-space>
                <n-space :size="2" title="点赞数">
                  <n-icon size="20" :depth="4" :component="IconZhan" />
                  <span>
                    {{ blog.likes }}
                  </span>
                </n-space>
                <n-space :size="2" title="评论数">
                  <n-icon size="20" :depth="4" :component="IconComment" />
                  <span>
                    {{ blog.commentCount }}
                  </span></n-space>
              </n-flex>
            </n-flex>
          </template>
          <n-skeleton v-if="loading" text :repeat="6" />
          <template #header-extra>
            <n-tag :type="blog.type === 1 ? 'success' : 'info'">
              {{ ArticleTypeLabels[blog.type] }}
            </n-tag>

          </template>
          <MarkdownView :content="blog.content"></MarkdownView>
        </n-card>
      </n-grid-item>
    </n-grid>

    <!-- 空状态 -->
    <n-card v-if="!loading && !blog" :bordered="false">
      <n-flex justify="center" align="center" style="padding: 40px;">
        <span>访问的内容没有了</span>
      </n-flex>
    </n-card>
  </n-flex>
</template>

<style scoped>
/* 使用 :deep() 选择器穿透 scoped 作用域 */
:deep(.blog-card-header) {
  border-bottom: 2px solid rgba(15, 109, 51);

  --n-padding-bottom: 5px;
}
</style>
